<template>
  <div class="gismap-data">
    <el-card :body-style="{ padding: '0px' }">
      <el-select v-model="value" placeholder="请选择" @change="townStreet" class="selectData">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <div class="resData">
        <div style="color:#fff;float:left;">餐饮企业：<span style="background:#357DC8;">{{restaurant}}</span>  家</div>
        <div style="color:#fff;float:left;margin-left:50px;">在线设备：<span style="background:#357DC8;">{{online}}</span>  台</div>
      </div>
      <el-row>
        <el-col :span="24"><div id="container"></div></el-col>
        <!-- <el-col :span="5">
          <el-row class="qiyegundong1">
            <el-col :span="24" class="qiyegundong">11111</el-col>
            <el-col :span="24" class="qiyegundong" style="margin-top:10px;">22222</el-col>
          </el-row>
        </el-col> -->
      </el-row>
      <el-row class="tanchu" v-show="tanchu">
        <el-col :span="24" style="margin-bottom:20px;">
          <el-button class="tanchubtn" type="text" icon="el-icon-close" @click="closetanchu"></el-button>
        </el-col>
        <el-col :span="24">
          <div class="personName"><i class="el-icon-s-shop fonticon"></i>店铺名：{{personName}}</div>
          <div class="personName"><i class="el-icon-location-information fonticon"></i>{{Address}}</div>
        </el-col>
        <el-col :span="24">
          <img :src="PictureUrl" v-if="PictureUrl !== null && PictureUrl !== ''"  style="width:95%;margin:10px;height:300px">
          <img src="../../assets/qiyelogo.png" v-else style="width:95%;margin:10px;"/>
        </el-col>
        <el-col :span="24" style="padding: 0 10px;">
          <el-table
            :data="tableDataid"
            class="tableDataid"
            border
            style="width: 100%;margin-top:20px;">
            <el-table-column
              prop="imei"
              label="设备编号">
            </el-table-column>
            <el-table-column prop="deviceStatus" label="设备状态">
              <template slot-scope="scope">
                <span v-text="scope.row.deviceStatus === '0' ? '正常' : scope.row.deviceStatus === '1' ? '不正常' : scope.row.deviceStatus === '2' ? 
            '不在线':'超过维护时间'">
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24">
          <el-col :span="12">
            <div class="personName" style="margin-left:10px;"><i class="el-icon-phone-outline fonticon"></i>{{personTel}}</div>
          </el-col>
          <el-col :span="12">
            <div class="personName" style="margin-left:10px;">维修次数：{{personTimes}}</div>
          </el-col>
        </el-col>
        <el-col :span="24">
          <div class="personName" style="margin-left:20px;">正常运行时长：{{personNormal}}</div>
        </el-col>
        <el-col :span="24">
          <div class="personName" style="margin-left:20px;">距离上次维修时间已经过了{{personMain}}</div>
        </el-col>
      </el-row>
      <el-row class="tuli">
        <el-col :span="6" :offset="1">
          <img :src="TuliImg" alt="">
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import Alarm from '../../assets/youyan.png';
import Alarm1 from '../../assets/youyan1.png';
import Alarm2 from '../../assets/youyan2.png';
import Alarm3 from '../../assets/youyan3.png';
export default {
  name: 'GisMap',
  data () {
    return {
      TuliImg:require('../../assets/tuli.png'),
      tanchu: false,
      options: [{
        value: '0',
        label: '宜兴埠镇'
      }, {
        value: '1',
        label: '普东街道'
      }, {
        value: '2',
        label: '天穆镇'
      }, {
        value: '3',
        label: '佳荣里街道'
      }, {
        value: '4',
        label: '瑞景街道'
      }, {
        value: '5',
        label: '青光镇'
      }, {
        value: '6',
        label: '双口镇'
      }, {
        value: '7',
        label: '双街镇'
      }, {
        value: '8',
        label: '北仓镇'
      }, {
        value: '9',
        label: '集贤里街道'
      }, {
        value: '10',
        label: '大张庄镇'
      }, {
        value: '11',
        label: '小淀镇'
      }, {
        value: '12',
        label: '西提头镇'
      }, {
        value: '13',
        label: '果园新村街道'
      }],
      value: '普东街道',
      lnglat: '',
      personName: '',
      PictureUrl:'',
      Address: '',
      personTel: '',
      personTimes: '',
      personNormal: '',
      personMain: '',
      tableDataid: [],
      restaurant: 0,
      online: 0
    }
  },
  created(){
    this.getList(117.207827,39.209176);
    this.getqiyeList();
    // 获取当前窗口缩放比例
    let WindowSize = window.devicePixelRatio;
    if (WindowSize<1) {
      this.$message({
        type:'warning',
        message:'检测到窗口的缩放比例不是正常比例，请调整到100%并刷新页面以获得最佳体验'
      })
    }
  },
  methods: {
    getqiyeList(){
      this.$api.BASICDISPLAY.basicData()
      .then(res => {
        this.restaurant = res.data.repastCount
        this.online = res.data.onlineCount
      })
      .catch(() => {
        this.$message({
          message:"暂无数据",
          type: 'error'
        }); 
      })
    },
    getList(lng,lat){
      setTimeout(() => {
        var map = new window.BMap.Map("container",{minZoom:12,maxZoom:30,enableMapClick:false});
        map.centerAndZoom(new window.BMap.Point(lng,lat), 19);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.addControl(new window.BMap.OverviewMapControl());
        map.addControl(new window.BMap.ScaleControl());
        map.setMapStyleV2({     
          styleId: '3fc0a07caff54d5cec9f6f00763a83e5'
        });
        // map.setMapStyle({
        //   styleJson: [
        //     {
        //       "featureType": "water",
        //       "elementType": "all",
        //       "stylers": {
        //           "color": "#021019"
        //       }
        //     },
        //     {
        //       "featureType": "highway",
        //       "elementType": "geometry.fill",
        //       "stylers": {
        //           "color": "#000000"
        //       }
        //     },
        //     {
        //       "featureType": "highway",
        //       "elementType": "geometry.stroke",
        //       "stylers": {
        //           "color": "#147a92"
        //       }
        //     },
        //     {
        //       "featureType": "arterial",
        //       "elementType": "geometry.fill",
        //       "stylers": {
        //           "color": "#000000"
        //       }
        //     },
        //     {
        //       "featureType": "arterial",
        //       "elementType": "geometry.stroke",
        //       "stylers": {
        //           "color": "#0b3d51"
        //       }
        //     },
        //     {
        //       "featureType": "local",
        //       "elementType": "geometry",
        //       "stylers": {
        //           "color": "#000000"
        //       }
        //     },
        //     {
        //       "featureType": "land",
        //       "elementType": "all",
        //       "stylers": {
        //           "color": "#08304b"
        //       }
        //     },
        //     {
        //       "featureType": "railway",
        //       "elementType": "geometry.fill",
        //       "stylers": {
        //           "color": "#000000"
        //       }
        //     },
        //     {
        //       "featureType": "railway",
        //       "elementType": "geometry.stroke",
        //       "stylers": {
        //           "color": "#08304b"
        //       }
        //     },
        //     {
        //       "featureType": "subway",
        //       "elementType": "geometry",
        //       "stylers": {
        //           "lightness": -70
        //       }
        //     },
        //     {
        //       "featureType": "building",
        //       "elementType": "geometry.fill",
        //       "stylers": {
        //           "color": "#000000"
        //       }
        //     },
        //     {
        //       "featureType": "all",
        //       "elementType": "labels.text.fill",
        //       "stylers": {
        //           "color": "#857f7f"
        //       }
        //     },
        //     {
        //       "featureType": "all",
        //       "elementType": "labels.text.stroke",
        //       "stylers": {
        //           "color": "#000000"
        //       }
        //     },
        //     {
        //       "featureType": "building",
        //       "elementType": "geometry",
        //       "stylers": {
        //           "color": "#022338"
        //       }
        //     },
        //     {
        //       "featureType": "green",
        //       "elementType": "geometry",
        //       "stylers": {
        //           "color": "#062032"
        //       }
        //     },
        //     {
        //       "featureType": "boundary",
        //       "elementType": "all",
        //       "stylers": {
        //           "color": "#1e1c1c"
        //       }
        //     },
        //     {
        //       "featureType": "manmade",
        //       "elementType": "geometry",
        //       "stylers": {
        //           "color": "#022338"
        //       }
        //     },
        //     {
        //       "featureType": "poi",
        //       "elementType": "all",
        //       "stylers": {
        //           "visibility": "off"
        //       }
        //     },
        //     {
        //       "featureType": "all",
        //       "elementType": "labels.icon",
        //       "stylers": {
        //           "visibility": "off"
        //       }
        //     },
        //     {
        //       "featureType": "administrative",
        //       "elementType": "labels.text.fill",
        //       "stylers": {
        //           "color": "#2da0c6",
        //           "visibility": "on"
        //       }
        //     }
        //   ]
        // });
        this.$api.WEBSITE.getMapData({
          permissionId: 2
        })
        .then(res => {
          for(var i=0;i<res.data.length;i++){
            if(res.data[i].deviceStatus === "0"){
              var myIcon = new window.BMap.Icon(Alarm, new window.BMap.Size(22,22));
              var marker_qybiaozhu = new window.BMap.Marker(new window.BMap.Point(res.data[i].bd_longtitude, res.data[i].bd_latitude), { icon: myIcon });
              map.addOverlay(marker_qybiaozhu);
              marker_qybiaozhu.addEventListener("click",this.attribute);
            } else if(res.data[i].deviceStatus === "1"){
              var myIcon1 = new window.BMap.Icon(Alarm1, new window.BMap.Size(22,22));
              var marker_qybiaozhu1 = new window.BMap.Marker(new window.BMap.Point(res.data[i].bd_longtitude, res.data[i].bd_latitude), { icon: myIcon1 });
              map.addOverlay(marker_qybiaozhu1);
              marker_qybiaozhu1.addEventListener("click",this.attribute);
            } else if(res.data[i].deviceStatus === "2"){
              var myIcon2 = new window.BMap.Icon(Alarm2, new window.BMap.Size(25,25));
              var marker_qybiaozhu2 = new window.BMap.Marker(new window.BMap.Point(res.data[i].bd_longtitude, res.data[i].bd_latitude), { icon: myIcon2 });
              map.addOverlay(marker_qybiaozhu2);
              marker_qybiaozhu2.addEventListener("click",this.attribute);
            } else if(res.data[i].deviceStatus === "3"){
              var myIcon3 = new window.BMap.Icon(Alarm3, new window.BMap.Size(25,25));
              var marker_qybiaozhu3 = new window.BMap.Marker(new window.BMap.Point(res.data[i].bd_longtitude, res.data[i].bd_latitude), { icon: myIcon3 });
              map.addOverlay(marker_qybiaozhu3);
              marker_qybiaozhu3.addEventListener("click",this.attribute);
            }
          }
        })
        this.$api.WEBSITE.getAdminist()
        .then(res => {
          for (var i = 0; i < res.data.length; i++) {
            var opts = {
              position: new window.BMap.Point(res.data[i].lng,res.data[i].lat),    // 指定文本标注所在的地理位置
            }
            var label = new window.BMap.Label(res.data[i].name, opts);  // 创建文本标注对象
            label.setStyle({
              color: "#fff",
              fontSize: "12px",
              background: "rgba(1,1,1,0.6)",
              padding:'5px',
              border:"none",
              fontFamily: "微软雅黑"
            });
            map.addOverlay(label);
            var polygonPath = []
            for (var j = 0; j < res.data[i].lngAndLats.length; j++) {
              var lng = res.data[i].lngAndLats[j].longtitude
              var lat = res.data[i].lngAndLats[j].latitude
              polygonPath.push(new window.BMap.Point(lng, lat))
            }
            var polyline = new window.BMap.Polyline(polygonPath, { strokeColor:res.data[i].colour,strokeWeight: 3, strokeOpacity: 1 });
            //创建多边形
            map.addOverlay(polyline);
          }
        })
        setTimeout(function () {
          getBoundary();
        }, 100);
        var blist = [];
        var districtLoading = 0;
        function getBoundary() {
          districtLoading++;
          var bdary = new window.BMap.Boundary();
          bdary.get('天津市', function(rs){ 
            var count = rs.boundaries.length;
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return;
            }
            for (var i = 0; i < count; i++) {
                blist.push({ points: rs.boundaries[i], name: '天津市' });
            }
            districtLoading--;
            if (districtLoading == 0) {
                //全加载完成后画端点
                drawBoundary();
            }
          })
        }
        function drawBoundary(){ 
          var pointArray = [];
          var pNW = { lat: 59.0, lng: 73.0 }
          var pNE = { lat: 59.0, lng: 136.0 }
          var pSE = { lat: 3.0, lng: 136.0 }
          var pSW = { lat: 3.0, lng: 73.0 }
          var pArray = [];
          pArray.push(pNW);
          pArray.push(pSW);
          pArray.push(pSE);
          pArray.push(pNE);
          pArray.push(pNW);
          for (var i = 0; i < blist.length; i++) {  
            var ply = new window.BMap.Polygon(blist[i].points, { strokeWeight: 1, strokeColor: "#fff", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多边形覆盖物
            map.addOverlay(ply);
            var path = ply.getPath();
            pointArray = pointArray.concat(path);
            pArray = pArray.concat(path);
            pArray.push(pArray[0]);
          }
          var plyall = new window.BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#fff", strokeWeight: 0.00001, fillColor: "gray", fillOpacity: 0.9 }); //建立多边形覆盖物
          map.addOverlay(plyall);
        }
      }, 500);
    },
    attribute(e){
      var p = e.target;
      this.tanchu = true
      this.$api.WEBSITE.getMapData({
        permissionId: 2
      })
      .then(res => {
        for(var i=0;i<res.data.length;i++){
          if(p.getPosition().lat == res.data[i].bd_latitude || p.getPosition().lng == res.data[i].bd_longtitude){
            this.$api.WEBSITE.getMapData1({
              rid: res.data[i].rid
            })
            .then(res => {              
              this.tableDataid = res.data
              for(var j=0;j<res.data.length;j++){
                this.personTel = res.data[j].tel
                this.personTimes = res.data[j].mainTainTimes
                this.personName = res.data[j].person_name
                this.PictureUrl = res.data[j].picture_url
                this.personNormal = res.data[j].normalTime
                this.personMain = res.data[j].lastMainTainTime
                this.Imei = res.data[j].imei
                this.Address = res.data[j].address
                this.maiPlan = res.data[j].maintainPlan
              }
            })
          }
        }
      })
      // alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat);  
    },
    closetanchu(){
      this.tanchu = false;
    },
    townStreet(val){
      if(val === "0"){
        this.getList(117.19606,39.221873);
      } else if(val === "1"){
        this.getList(117.20971,39.210433);
      } else if(val === "2"){
        this.getList(117.196482,39.207127);
      } else if(val === "3"){
        this.getList(117.127117,39.199358);
      } else if(val === "4"){
        this.getList(117.131552,39.185596);
      } else if(val === "5"){
        this.getList(117.062535,39.197135);
      } else if(val === "6"){
        this.getList(117.030564,39.242437);
      } else if(val === "7"){
        this.getList(117.113479,39.283269);
      } else if(val === "8"){
        this.getList(117.114954,39.234587);
      } else if(val === "9"){
        this.getList(117.138896,39.235612);
      } else if(val === "10"){
        this.getList(117.22596,39.303988);
      } else if(val === "11"){
        this.getList(117.234517,39.253052);
      } else if(val === "12"){
        this.getList(117.345131,39.260024);
      } else if(val === "13"){
        this.getList(117.144385,39.226047);
      }
    }
  }
}
</script>
<style lang="scss" scoped>
#container{
  height: 834px;
  max-height: 834px;
}
/deep/.BMap_cpyCtrl {
  display: none;
}
/deep/.anchorBL {
  display: none;
}
.qiyegundong1{
  background: #06263A;
}
.qiyegundong{
  height: 412px;
  color: #fff;
  box-shadow: 0px 0px 10px #558db1 inset;
}
.tanchu{
  position: absolute; 
  top: 21px;
  right: 20px;
  width: 340px;
  height: 834px;
  max-height: 834px;
  background: #26323b;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  -khtml-opacity:0.8;
  opacity: 0.8; 
}
.tuli{
  position: absolute;
  top: 810px;
}
.tanchubtn{
  float: right;
  margin-right: 10px;
  background: #8b8b8b;
  color: #24292d;
  margin-top: 10px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  /deep/.el-icon-close{
    font-size: 22px;
    margin-top: -10px;
  }
}
.personName{
  color: #fff;
  font-size: 18px;
  margin: 10px 0;
}
.fonticon{
  font-size: 22px;
  color: #62dffe;
  margin: 0 10px;
}
/deep/.tableDataid thead tr th, /deep/.tableDataid tbody tr td{
  background: #2e3235;
  color: #fff;
}
/deep/.tableDataid tbody tr:hover>td{
  background: #2e3235;
}
.selectData{
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 999;
}
.resData{
  position: absolute;
  top: 35px;
  left: 300px;
  z-index: 999;
  font-size: 16px;
}
</style>